<template>
    <div>
        <el-row>
            <el-col>
                <el-form :inline="true" :model="formInline">
                    <el-form-item>
                        <el-input size="mini" v-model="formInline.title" placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-select clearable size="mini" v-model="formInline.status" placeholder="请选择状态">
                            <el-option label="启用" value="1"></el-option>
                            <el-option label="禁用" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" @click="search">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row class="buttonList">
            <el-col>
                <el-button type="primary" size="mini" @click="newAddData">新增</el-button>
                <el-button :disabled="btnDisabled" type="primary" size="mini" @click="edit">编辑</el-button>
                <el-button type="danger" size="mini">启用/禁用</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <el-table
                        :data="tableData"
                        border
                        size="mini"
                        @selection-change="handleSelectionChange"
                        style="width: 100%">
                    <el-table-column
                            align="center"
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="TITLE"
                            label="检查项目">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="SCORE"
                            label="分值">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="MSG"
                            label="描述">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="STATUS"
                            label="状态">
                        <template slot-scope="scope">
                            {{scope.row.STATUS ? '启用' : '禁用'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="CREATEUSERNAME"
                            label="创建人">
                    </el-table-column>
                    <el-table-column
                            width="160px"
                            align="center"
                            prop="CREATETIME"
                            label="创建时间">
                        <template slot-scope="scope">
                            {{new Date(scope.row.CREATETIME).toLocaleString()}}
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :page-size="pagination.pageSize"
                        :total="pagination.total"
                        :page-sizes="[10, 20, 30, 50, 100]"
                >
                </el-pagination>
            </el-col>
        </el-row>
        <el-dialog title="检查项目" :visible.sync="dialogFormVisible" center width="50%">
            <el-form :model="form" ref="form" label-width="80px">
                <el-row>
                    <el-col :span="12" class="nptError">
                        <el-form-item
                                prop="title"
                                :rules="{ required: true, message: '请输入检查项目名称', trigger: 'blur' }"
                                label="检查项目">
                            <el-input size="mini" v-model="form.title" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="nptError">
                        <el-form-item
                                prop="score"
                                :rules="{ required: true, message: '请输入总分', trigger: 'blur' }"
                                label="总分">
                            <el-input size="mini" v-model="form.score" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col style="margin-top: 8px">
                        <el-form-item
                                prop="msg"
                                :rules="{ required: true, message: '请输入描述', trigger: 'blur' }"
                                label="描述">
                            <el-input type="textarea" size="mini" v-model="form.msg" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="newAdd">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "checkS",
        data() {
            return {
                formInline: {},
                pagination: {
                    pageSize: 20,
                    total: 1,
                    pageNo: 1
                },
                btnDisabled: true,
                tableData: [],
                selectId: [],
                dialogFormVisible: false,
                form: {
                    title: '',
                    score: '',
                    msg: ''
                },
                isEdit: ''
            }
        },
        created() {
            this.getData(this.pagination.pageSize, this.pagination.pageNo)
        },
        methods: {
            getData(pageSize, pageNo) {
                this.$post('/check7S/findCheck7S', {pageSize, pageNo}).then(res => {
                    console.log(res)
                    this.tableData = res.data.data.dataList;
                    this.pagination.total = res.data.data.total;
                })
            },
            newAddData() {
                this.dialogFormVisible = true;
                this.isEdit = '';
            },
            edit() {
                this.dialogFormVisible = true;
                this.isEdit = 'edit';
                this.form.title = this.selectId[0].TITLE;
                this.form.score = this.selectId[0].SCORE;
                this.form.msg = this.selectId[0].MSG;
            },
            newAdd() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        let url = '';
                        if(this.isEdit === 'edit') {
                            url = '/check7S/update';
                            this.form.id = this.selectId[0].ID;
                        } else {
                            url = '/check7S/add';
                        }
                        this.$post(url, this.form).then(res => {
                            if(res.data.status === 1) {
                                this.dialogFormVisible = false;
                                this.getData(this.pagination.pageSize, this.pagination.pageNo);
                                this.$message.success('保存成功');
                            } else {
                                this.$message.error('保存失败,请稍后再试');
                            }
                        });
                    }
                })
            },
            search() {
                this.$post('/check7S/findCheck7S', {
                    title: this.formInline.title,
                    status: this.formInline.status,
                    pageSize: this.pagination.pageSize,
                    pageNo: 1
                }).then(res => {
                    this.tableData = res.data.data.dataList;
                    this.pagination.total = res.data.data.total;
                })
            },
            handleSelectionChange(val) {
                this.selectId = val;
                if(val.length === 1) {
                    this.btnDisabled = false;
                } else {
                    this.btnDisabled = true;
                }
            },
            handleSizeChange(size) {
                this.pagination.pageSize = size;
                this.getData(size, this.pagination.pageNo);
            },
            handleCurrentChange(page) {
                this.pagination.pageNo = page;
                this.getData(this.pagination.pageSize, page);
            }
        }
    }
</script>

<style scoped lang="scss">
    .nptError {
        /deep/.el-form-item__error {
            top: 32px;
        }
    }
</style>
